<template>
	<view class="gift-selection">
		<view class="gift-selection-top">
			<image
				src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250325/e7ccb7a6a6bcf42047cf77bdef459b24.jpg"
				mode="aspectFill"></image>
		</view>
		<view class="container">
			<!-- 轮播组件 -->
			<view class="custom-swiper">
				<!-- 标题区域 -->
				<view class="title-container">
					<view v-for="(item, index) in swiperData" :key="index"
						:class="['title-item', currentIndex === index ? 'active' : '']" @tap="changeSwiper(index)">
						<view class="title-circle">
							<view class="title-circle-text">{{ index + 1 }}</view>
							<view class="title-text">{{ item.title }}</view>
							<view class="arrow" v-if="index < swiperData.length - 1">>></view>
						</view>
					</view>
				</view>

				<!-- 轮播图区域 -->
				<swiper class="swiper-container" :current="currentIndex" @change="handleSwiperChange"
					:autoplay="autoplay" :interval="interval" :circular="circular">
					<swiper-item v-for="(item, index) in swiperData" :key="index">
						<view class="content-card">
							<image class="content-card-image" :src="item.pic" mode="aspectFill"></image>
						</view>
					</swiper-item>
				</swiper>
				<view class="indicator" @tap="toggleFullScreen">
					<image class="play"
						src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250325/ad45480dd1eed6772830eff82c8ee14b.png"
						mode="aspectFill"></image>
					<view class="play-text">送礼指南</view>
				</view>
			</view>
		</view>

		<video class="video-container" @fullscreenchange="handleFullscreenChange" :src="videoUrl" id="video"
			ref="videoPlayer" v-show="isVideoVisible" controls direction="90"></video>


		<!-- 礼品列表 -->
		<view class="gift-list">
			<view class="gift-card" v-for="(gift, index) in giftList" :key="index">
				<view class="gift-card-content">
					<view class="gift-name">{{ gift.name }}</view>
					<view class="gift-desc">{{ gift.description }}</view>
				</view>
				<view class="gift-image-container">
					<image class="gift-image" :src="gift.image" mode="aspectFill"></image>
				</view>
				<view class="gift-info">
					<view class="gift-price-action">
						<view class="gift-price"><text style="font-size: 12px">¥</text>{{ gift.price }}</view>
						<view class="btn-item" @tap="buydialogChange" data-btntype="3">
							<image class="btn-item-img"
								src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250308/fbaf6b6d4eb6b2a0881f76172e0bcabd.png" />
							<view class="btn-item-text">送礼</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<buydialog v-if="buydialogShow" :proid="561" :btntype="btntype" @buydialogChange="buydialogChange"
			@showLinkChange="showLinkChange" :menuindex="menuindex" @addcart="addcart"></buydialog>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				buydialogShow: false,
				isVideoVisible: false,
				isFullScreen: false,
				isPlaying: false,
				videoUrl: "https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250106/5ae005872a7e9d6fefe422d8291feebd.mp4",
				menuindex: -1,
				// 当前轮播索引
				currentIndex: 0,
				// 是否自动播放
				autoplay: true,
				// 自动播放间隔时间
				interval: 3000,
				// 是否循环播放
				circular: true,
				// 轮播数据
				swiperData: [{
						title: "送礼品",
						pic: "https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250325/e7ccb7a6a6bcf42047cf77bdef459b24.jpg",
					},
					{
						title: "支付",
						pic: "https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250325/e7ccb7a6a6bcf42047cf77bdef459b24.jpg",
					},
					{
						title: "分享微信好友",
						pic: "https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250325/e7ccb7a6a6bcf42047cf77bdef459b24.jpg",
					},
				],
				userInfo: {
					avatar: "https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250122/b2225f8e1b80fe302b1f0ee3365e7189.jpg",
					name: "S**A",
					timeInfo: "4小时前送出好礼",
				},
				giftSteps: [{
						icon: "gift",
						text: "送礼品"
					},
					{
						icon: "wallet",
						text: "支付"
					},
					{
						icon: "chat",
						text: "分享给好友"
					},
				],
				giftList: [{
						name: "鲜炖燕窝",
						description: "鲜炖技术 开盖即食232g*6瓶/盒",
						price: "1380",
						image: "https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250122/93299d99a47f624b41090728314de9a9.jpg",
					},
					{
						name: "精选鲜活进口加拿大龙虾",
						description: "来自加拿大龙士家龙虾",
						price: "899",
						image: "https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250122/93299d99a47f624b41090728314de9a9.jpg",
					},
				],
			};
		},
		onLoad() {
			// 锁定竖屏（home键在右）
			wx.setScreenOrientation({
				orientation: "portrait"
			});
		},

		onUnload() {
			// 退出页面时恢复自动旋转
			wx.setScreenOrientation({
				orientation: "auto"
			});
		},
		methods: {
			addcart: function(e) {
				console.log(e);
				this.cartnum = this.cartnum + e.num;
			},
			buydialogChange: function(e) {
				if (!this.buydialogShow) {
					this.btntype = e.currentTarget.dataset.btntype;
				}
				this.buydialogShow = !this.buydialogShow;
			},
			// 点击标题切换轮播图
			changeSwiper(index) {
				this.currentIndex = index;
			},
			// 滑动轮播图时切换标题
			handleSwiperChange(e) {
				this.currentIndex = e.detail.current;
			},
			// 切换全屏播放
			toggleFullScreen() {
				const videoContext = uni.createVideoContext("video");

				if (!this.isVideoVisible) {
					// 第一次点击，显示视频并全屏播放
					this.isVideoVisible = true;
					this.$nextTick(() => {
						videoContext.requestFullScreen();
						videoContext.play();
					});
				} else if (!this.isPlaying) {
					// 视频可见但未播放，开始播放
					videoContext.play();
				} else if (!this.isFullScreen) {
					// 正在播放但未全屏，进入全屏
					videoContext.requestFullScreen();
				} else {
					// 正在全屏播放，退出全屏
					videoContext.exitFullScreen();
				}
			},

			handleFullscreenChange(e) {
				// 当退出全屏时隐藏视频
				if (!e.detail.fullScreen) {
					this.isVideoVisible = false;

					// 如果需要完全停止播放可以加上：
					const videoContext = uni.createVideoContext('video', this);
					videoContext.pause();
					videoContext.seek(0); // 可选：回到开头
				}
			},

			// 如果需要手动控制退出全屏
			exitVideo() {
				const videoContext = uni.createVideoContext('video', this);
				videoContext.exitFullScreen(); // 这会触发fullscreenchange事件
			}
		},
	};
</script>

<style lang="scss">
	.gift-selection {
		min-height: 100vh;
		background: #052323;
		padding-bottom: 30rpx;

		.gift-selection-top {
			image {
				width: 100%;
				height: 550rpx;
			}
		}

		.gift-title-card {
			position: relative;
			margin: 30rpx;
			background: rgba(255, 255, 255, 0.1);
			border-radius: 20rpx;
			padding: 60rpx 40rpx;
			border: 1px solid rgba(255, 255, 255, 0.2);

			.gift-bow {
				position: absolute;
				top: -30rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 200rpx;
				height: 100rpx;
			}

			.gift-title {
				display: flex;
				flex-direction: column;
				align-items: center;

				.main-title {
					color: #ffd700;
					font-size: 48rpx;
					font-weight: bold;
					margin-bottom: 20rpx;
				}

				.sub-title {
					color: rgba(255, 255, 255, 0.9);
					font-size: 28rpx;
				}
			}
		}

		.gift-steps {
			margin: 30rpx;

			.steps-swiper {
				height: 120rpx;

				.step-item {
					display: flex;
					align-items: center;
					justify-content: center;
					height: 100%;

					.step-icon {
						margin-right: 20rpx;
					}

					.step-text {
						color: #ffffff;
						font-size: 28rpx;
					}
				}
			}
		}

		.gift-list {
			padding: 0 30rpx;

			.gift-card {
				background: #ffffff;
				border-radius: 20rpx;
				overflow: hidden;
				margin-bottom: 30rpx;

				.gift-card-content {
					background: linear-gradient(to right, #fee8c7, #fefbf0);
					padding: 20rpx;
				}

				.gift-name {
					font-size: 32rpx;
					font-weight: bold;
					color: #64380b;
					margin-bottom: 10rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					width: 100%;
				}

				.gift-desc {
					font-size: 26rpx;
					color: #64380b;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					width: 100%;
				}

				.gift-image-container {
					position: relative;
					padding: 20rpx;

					.gift-image {
						width: 100%;
						height: 300rpx;
						border-radius: 20rpx;
					}

					.gift-badge {
						position: absolute;
						top: 20rpx;
						right: 20rpx;
						background: #0d7a62;
						color: #ffffff;
						font-size: 24rpx;
						padding: 6rpx 16rpx;
						border-radius: 20rpx;
					}
				}

				.gift-info {
					padding: 0rpx 20rpx 20rpx 20rpx;

					.gift-price-action {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.gift-price {
							color: #ff5733;
							font-size: 36rpx;
							font-weight: bold;
						}

						.gift-action {
							display: flex;
							align-items: center;
							background: #0d7a62;
							color: #ffffff;
							padding: 10rpx 30rpx;
							border-radius: 30rpx;

							text {
								margin-left: 10rpx;
								font-size: 26rpx;
							}
						}
					}
				}
			}
		}
	}

	.btn-item {
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 36rpx;
		background-color: #fff7e6;
		width: 160rpx;
		height: 78rpx;
	}

	.btn-item-img {
		width: 34rpx;
		height: 34rpx;
		margin-right: 4rpx;
	}

	.btn-item-text {
		font-size: 30rpx;
		font-weight: 700;
		color: #ac5300;
	}

	.container {
		padding: 20rpx;
	}

	.custom-swiper {
		width: 100%;
		position: relative;
		background: linear-gradient(to bottom, #122c2b, #062221);
		border-radius: 20rpx;
		padding: 20rpx;
	}

	.title-container {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10rpx 0;
		position: relative;
		z-index: 10;
	}

	.title-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.title-circle {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 10rpx;
		color: #4f7c7a;
	}

	.title-circle-text {
		width: 30rpx;
		height: 30rpx;
		line-height: 30rpx;
		border-radius: 50%;
		text-align: center;
		background: #4f7c7a;
		font-size: 24rpx;
		color: #000;
	}

	.title-item.active .title-circle {
		color: #fad29e;
	}

	.title-item.active .title-circle-text {
		color: #000;
		background: #fad29e;
	}

	.title-text {
		font-size: 24rpx;
		text-align: center;
		padding: 0 10rpx;
	}

	.swiper-container {
		width: 75%;
		height: 180rpx;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.swiper-item {}

	.content-card {
		border-radius: 12rpx;
		width: 100%;
		height: 180rpx;
		overflow: hidden;
	}

	.content-card-image {
		width: 100%;
		height: 100%;
	}

	.card-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.card-desc {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 30rpx;
	}

	.card-actions {
		display: flex;
		justify-content: space-between;
	}

	.action-btn {
		padding: 10rpx 30rpx;
		font-size: 28rpx;
		border-radius: 30rpx;
		margin: 0;
	}

	.action-btn.primary {
		background-color: #07c160;
		color: #fff;
	}

	.action-btn.secondary {
		background-color: #f0f0f0;
		color: #333;
	}

	.indicator {
		position: absolute;
		right: 20rpx;
		bottom: 20rpx;
		background: #183231;
		color: #fff;
		font-size: 24rpx;
		padding: 6rpx 24rpx;
		border-radius: 20rpx;
		height: 180rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.play {
		width: 50rpx;
		height: 50rpx;
		margin-bottom: 10rpx;
	}

	.video-container {
		width: 100%;
		height: 100vh;
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		background: #000;
	}
</style>